@import "@wordpress/base-styles/breakpoints";
@import "@automattic/components/src/styles/typography";

$button-padding: 8px 32px;

.stats-purchase-page {
	--font-body: 16px;
	--jp-black: #000;
	--jp-white: #fff;
	--jp-green-50: #008710;
	--gray-gray-50: #646970;
	--stats-purchase-width: 1124px;
	// The following variables are layout distribution related to the `--stats-purchase-width`.
	--stats-purchase-right-width: 456px;
	--stats-purchase-left-max-width: calc(var(--stats-purchase-width) - var(--stats-purchase-right-width));

	// Apply Jetpack dedicated styling upon the Calypso theme base.
	&:not(.stats-purchase-page--is-wpcom) {
		.stats-purchase-wizard__personal-checklist {
			.components-checkbox-control__input[type="checkbox"] {
				&:checked {
					background-color: var(--studio-jetpack-green-50);
					border-color: var(--studio-jetpack-green-50);
				}

				&:focus {
					box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--studio-jetpack-green-50);
				}
			}
		}

		.stats-purchase-single__personal-checklist {
			margin-bottom: 24px;

			.components-checkbox-control__input[type="checkbox"] {
				&:checked {
					background-color: var(--studio-jetpack-green-50);
					border-color: var(--studio-jetpack-green-50);
				}

				&:focus {
					box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--studio-jetpack-green-50);
				}
			}

			.stats-purchase-single__control--checkbox {
				.components-checkbox-control__label {
					font-size: var(--font-body);
					line-height: 24px;
					width: auto;
					color: var(--jp-black);
				}
			}
		}
	}
}

// Adjust purchase page styling for WPCOM.
.stats-purchase-page--is-wpcom {
	.stats-purchase-wizard {
		.components-button {
			&.is-primary {
				background-color: var(--color-accent);
				border-color: var(--color-accent);
			}
			&.is-link {
				color: var(--color-sidebar-menu-selected-background);
			}
		}

		li.stats-purchase-wizard__benefits-item--included,
		.stats-purchase-wizard__benefits--included li {
			background-image: url();
		}

		.stats-purchase-wizard__card {
			color: var(--studio-gray-80);

			// Page heading styles.
			h1,
			.components-panel__header h2 {
				font-family: $font-recoleta;
				color: var(--studio-gray-100);
				font-size: $font-headline-small;
				font-style: normal;
				font-weight: 400;
				line-height: 40px;
			}

			.components-panel__body-title button {
				font-family: $font-sf-pro-display;
				line-height: 30px;
				color: var(--studio-gray-80);
			}

			.stats-purchase-wizard__pricing-cadency {
				font-size: $font-body-small;
			}

			.button {
				font-family: $font-sf-pro-text;
				font-size: $font-body;
				padding: $button-padding;
			}
		}

		.stats-purchase-wizard__card-title-indicator {
			&.active {
				background-color: var(--color-primary);
				border-color: var(--color-primary);
			}
		}

		.stats-purchase-wizard__notice {
			color: var(--studio-yellow-80);

			.is-link {
				color: var(--studio-yellow-80);
			}

			// TODO: improve this as naming it notice--green is not correct for WPCOM
			&.stats-purchase-wizard__notice--green {
				background-color: var(--studio-yellow-5);
			}
		}

		.stats-purchase-wizard__card-grid {
			color: var(--studio-black);
		}

		.jp-components-pricing-slider__track.jp-components-pricing-slider__track-0 {
			background-color: var(--color-primary);
		}

		.jp-components-pricing-slider__thumb {
			border-color: var(--color-primary);
		}

		// On holding thumb styling
		.jp-components-pricing-slider--is-holding {
			.jp-components-pricing-slider__thumb {
				box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
			}
		}
	}
}

.stats-purchase-page__loader {
	display: flex;
	justify-content: center;
}

.stats-purchase-wizard {
	// Basic font family for all the text regardless of the site type.
	font-family: $font-sf-pro-text;
	display: flex;
	justify-content: center;

	@media (max-width: $break-wide) {
		justify-content: left;

		> div {
			flex: 1 0 auto;
		}
	}

	.stats-purchase-wizard__card-parent {
		border-radius: 4px;
		width: var(--stats-purchase-width);
		max-width: 100%;
	}

	.stats-purchase-wizard__card {
		display: flex;

		h1,
		.components-panel__header h2 {
			color: var(--studio-black);
			font-family: $font-sf-pro-display;
			font-size: $font-headline-small;
			font-weight: 700;
			line-height: 40px;
		}

		a {
			color: var(--studio-black);
			text-decoration: underline;
			font-weight: bolder;
		}
	}

	.stats-purchase-wizard__card-inner--single {
		padding: 64px;
		box-sizing: border-box;
		flex: 2 2 auto;

		p {
			width: 36em;
			@media (max-width: $break-medium) {
				width: unset;
			}
		}

		@media (max-width: $break-medium) {
			padding: 32px 24px;
		}
	}

	.stats-purchase-wizard__card-inner--left {
		padding: 64px;
		box-sizing: border-box;
		flex: 2 2 auto;
		max-width: var(--stats-purchase-left-max-width);

		@media (max-width: $break-medium) {
			padding: 32px 24px;
		}
	}

	.stats-purchase-wizard__card-inner--right {
		display: none;
		align-items: center;
		background: #f9f9f6;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		flex: 1 1 var(--stats-purchase-right-width);

		@media (min-width: $break-small) {
			display: flex;
		}

		@media (min-width: $break-medium) {
			display: none;
		}

		// Hide the right side on a smaller content area due to the sidebar menu.
		@media (min-width: $break-large) {
			display: flex;
		}

		> * {
			z-index: 2;
		}
	}

	.stats-purchase-wizard__card-inner--right-background {
		position: absolute;
		overflow: hidden;
		width: 100%;
		height: 100%;
		z-index: 0;
		display: flex;
		align-items: center;
	}

	.stats-purchase-wizard__average-price {
		font-size: $font-body-small;
		margin-bottom: 32px;
		color: var(--studio-gray-80);
		text-align: center;
	}

	.stats-purchase-wizard__benefits {
		margin-bottom: 32px;

		li {
			margin-bottom: 8px;
			padding-left: 28px;
			background: no-repeat 0 50%;
			background-position-y: top;

			display: flex;
			align-items: center;

			& > svg {
				margin-left: 5px;
				fill: var(--studio-gray-20);
				cursor: pointer;
			}
		}
	}

	li.stats-purchase-wizard__benefits-item--included,
	.stats-purchase-wizard__benefits--included li {
		background-image: url();
	}

	li.stats-purchase-wizard__benefits-item--not-included,
	.stats-purchase-wizard__benefits--not-included li {
		background-image: url();
	}

	.stats-purchase-wizard__personal-checklist {
		margin-bottom: 24px;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.stats-purchase-wizard__qualifications {
		li {
			margin-bottom: 8px;
		}
	}

	.stats-purchase-wizard__celebrate {
		position: absolute;
		z-index: 1;
	}

	.stats-purchase-wizard__biggest-supporters {
		position: absolute;
		width: 100%;
		top: 10px;
		left: 50%;
		font-weight: 500;
		text-align: center;
		transform: translateX(-50%);
		backdrop-filter: blur(2px);
	}

	h3 {
		margin: 0;
	}

	.stats-purchase-wizard__pricing {
		margin: 32px 0;

		.stats-purchase-wizard__pricing-value {
			display: flex;
			align-items: flex-start;
			gap: 2px;
			font-family: $font-sf-pro-display;
			color: var(--studio-gray-100);
		}

		.stats-purchase-wizard__pricing-currency {
			font-size: $font-title-medium;
			line-height: 60px;
			line-height: 24px;
		}

		.stats-purchase-wizard__pricing-amount {
			font-size: $font-headline-large;
			font-weight: 700;
			line-height: 40px;
		}

		.stats-purchase-wizard__pricing-cadency {
			font-size: $font-body-small;
			color: var(--studio-gray-40);
			margin-top: 12px;
		}

		sup {
			color: var(--studio-black);
			vertical-align: super;
			font-size: $font-title-small;
			font-style: normal;
			font-weight: 700;
			line-height: 20px;
		}
	}

	.stats-purchase-wizard__card-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 16px 32px;

		p {
			margin-bottom: 0;
		}

		button {
			margin-top: 8px;
		}
	}

	.stats-purchase-wizard__card-panel {
		border: 0;

		> div {
			border: 0;
		}

		.components-panel__body-title {
			button {
				font-size: 20px;
				font-weight: 500;
			}
		}
	}

	.stats-purchase-wizard__card-grid-header--left,
	.stats-purchase-wizard__card-grid-header--right {
		font-weight: 600;
		font-size: var(--font-body);
	}

	.stats-purchase-wizard__card-grid-action--left,
	.stats-purchase-wizard__card-grid-action--right {
		button {
			width: 100%;
			justify-content: center;
		}
	}

	.stats-purchase-wizard__card-title-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		min-width: 24px;
		height: 24px;
		margin-right: 8px;
		font-size: $font-body-small;
		border: 1.5px solid var(--jp-black);
		border-radius: 50%;

		&.active {
			color: var(--jp-white);
			background: var(--jp-green-50);
			border-color: var(--jp-green-50);
		}
	}

	.stats-purchase-wizard__card-panel-title {
		// Hide the remaining panel title after the opened one.
		& + .stats-purchase-wizard__card-panel-title:not(.is-opened) {
			display: none;
		}

		h2 > button {
			cursor: auto;

		}

		&.stats-purchase-wizard__card-panel--type-selected {
			h2 > button {
				cursor: pointer;
			}

			.stats-purchase-wizard__card-title-indicator {
				color: var(--jp-white);
				background: var(--jp-black);
			}
		}
	}

	.components-button {
		&.is-primary {
			border-radius: 4px;
			color: var(--jp-white);
			background-color: #1a1a1a;
			border-color: #1a1a1a;
			transition: all 0.25s ease-out;
			font-size: var(--font-body);
			line-height: 24px;
			padding: $button-padding;
			height: auto;

			&:hover,
			&:active,
			&:focus {
				background: var(--studio-gray-80);
				border-color: var(--studio-gray-80);
			}

			&[disabled],
			&:disabled,
			&.disabled {
				opacity: 0.3;
			}
		}

		&.is-secondary {
			border-radius: 4px;
			font-size: var(--font-body);
			line-height: 24px;
			padding: $button-padding;
			height: auto;
		}

		&.is-link {
			color: var(--jp-green-50);
			font-size: inherit;
			display: inline;
		}
	}

	// override panel
	.components-panel__body {
		& > .components-panel__body-title:hover {
			background-color: transparent;
		}

		&.is-opened {
			padding: 0 16px;

			& > .components-panel__body-title {
				margin-top: 0;
				margin-bottom: 12px;
			}
		}
	}

	.components-panel__header {
		margin-bottom: 28px;
	}

	.components-panel__row {
		padding-left: 35px;
	}

	.components-panel__body-toggle.components-button {
		padding: 12px 16px;
	}

	.components-panel__arrow {
		display: none;
	}

	.components-base-control__field {
		display: flex;
		align-items: center;

		// add label wrapping
		label {
			display: flex;
			width: calc(100% - 32px); // 32px - checkbox width
			max-width: calc(100% - 32px);
		}
	}

	.stats-purchase-wizard__notice {
		margin: 12px 0;
		padding: 12px 16px;
		background: var(--studio-yellow-5);
		border-radius: 4px;

		.is-link {
			color: var(--jp-black);
			font-weight: normal;
		}

		&.connection-notice {
			margin-bottom: 32px;
			text-align: center;
		}
	}

	.stats-purchase-wizard__slider {
		padding: 32px 0 16px;
	}

	.stats-purchase-wizard__notice--green {
		background-color: var(--studio-jetpack-green-5);
	}

	.stats-purchase-wizard__control--checkbox {
		font-size: var(--font-body);
	}
}

.stats-purchase-wizard--single {
	margin-bottom: 24px;

	h1 {
		font-family: $font-sf-pro-display;
		font-size: $font-headline-small;
		font-weight: 700;
		line-height: 40px;
		margin-bottom: 24px;
	}
}

.stats-purchase-wizard__actions {
	.components-button {
		display: block;
		width: 100%;
		margin-bottom: 12px;
	}
}

.stats-purchase-single__personal-checklist-button {
	.components-button {
		box-shadow: inset 0 0 0 1px #1a1a1a;
		&.is-secondary {
			&[disabled],
			&:disabled,
			&.disabled {
				box-shadow: inset 0 0 0 1px var(--color-neutral-5);
			}
		}
	}
}

.stats-purchase-single__error-msg {
	color: var(--gray-gray-50);
	font-style: italic;
	font-size: $font-body-small;
	margin-top: 24px;
}

.stats-purchase-page__footnotes {
	margin-top: 24px;
	color: var(--gray-gray-50);
	font-size: $font-body-small;
	text-align: center;
}
